<template>
  <div>
    <div class="registerInfo-container">
      <modules-title title-name="医生工作统计">
        <template slot="btn">
<!--          <el-button class="border-btn">导出</el-button>-->
        </template>
      </modules-title>
      <div class="main">
        <div class="searchBar">
          <el-form inline :model="storage">
            <el-form-item label="就诊时间">
              <el-date-picker
                class="searchBar_picker"
                value-format="yyyy-MM-dd"
                v-model="date"
                @input="dataIn"
                type="daterange"
                range-separator="-"
                :picker-options="pickerOptions"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="医生名称">
              <el-input
                @change="inputNane"
                @keyup.enter.native="userNameKey"
                clearable
                placeholder="搜索医生名称"
                v-model="storage.doctor_name">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search" class="main-btn">查询</el-button>
              <el-button class="border-btn" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-card shadow="never" class="card_n1">
            <div class="box">
              <p class="p1">医生工作概览</p>
              <ul class="ul">
                <li>
                  <p class="p2">{{people_always}}</p>
                  <p class="p3">总就诊人次</p>
                </li>
                <li>
                  <p class="p2"><span style="font-size:24px">￥</span>{{amount_business | moneyFormat}}</p>
                  <p class="p3">营业金额合计</p>
                </li>
              </ul>
            </div>
          </el-card>
          <el-table
            :data="tableData"
            :default-sort = "{prop: 'created_at', order: 'descending'}"
            :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
          >
            <el-table-column label="就诊时间" prop="created_at" sortable  align="center">
              <template #default="{row}">
                {{row.created_at | dateFormat}}
              </template>
            </el-table-column>
            <el-table-column label="患者名称" prop="real_name" align="center"></el-table-column>
            <el-table-column label="医生名称" prop="doctor_name" align="center"></el-table-column>
            <el-table-column label="诊断结果" prop="result" align="center"></el-table-column>
            <el-table-column label="金额" prop="amount" align="center">
              <template #default="{row}">
                <span class="price">￥{{row.amount}}</span>
              </template>
            </el-table-column>

          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="storage.pager.number"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="storage.pager.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getDoctorWord} from '@/api/statistical';

  export default {
    name: "doctorWork",
    data() {
      return {
        date: '',
        storage: {
          start_time: '',
          end_time: '',
          doctor_name: '',
          pager: {
            number: 1,
            size: 10
          }
        },
        total: 0,
        people_always: 0,
        amount_business: 0,
        tableData: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created() {
      this.getDoctorWorkData()
    },
    mounted() {
      var date = new Date();
      var year = date.getFullYear()
      var month = date.getMonth() + 1;
      month = (month < 10 ? '0' + month : month)
      var day = date.getDate();
      day = (day < 10 ? '0' + day : day)
      this.storage.start_time = this.storage.end_time = `${year.toString()}-${month.toString()}-${day.toString()}`
      this.date = [this.storage.start_time, this.storage.end_time]
    },
    methods: {
      //input
      dataIn(e) {
        this.$nextTick(() => {
          if (e == null) {
            this.storage.start_time = ''
            this.storage.end_time = ''
            this.storage.pager.number = 1
            this.getDoctorWorkData()
          } else {
            this.$set(this, "date", [e[0], e[1]]);
            this.storage.start_time = e[0]
            this.storage.end_time = e[1]
            this.storage.pager.number = 1
            this.getDoctorWorkData()
          }
        })
      },
      //医生名称事件
      inputNane(e) {
        this.$nextTick(_ => {
          if (e === null) {
            this.storage.doctor_name = ''
            this.storage.pager.number = 1
            this.getDoctorWorkData()
          } else {
            this.storage.doctor_name = e
            this.storage.pager.number = 1
            this.getDoctorWorkData()
          }
        })
      },
      //医生名称回车
      userNameKey(e) {
        let keyCode = window.event ? e.keyCode : e.which
        if (keyCode === 13 && this.storage.doctor_name) {
          this.storage.pager.number = 1
          this.getDoctorWorkData()
        }
      },
      //查询
      search() {
        this.storage.pager.number = 1
        this.getDoctorWorkData()
      },
      //重置
      reset() {
        this.date = ''
        this.storage = {
          start_time: '',
          end_time: '',
          doctor_name: '',
          pager: {
            number: 1,
            size: 10
          }
        }
        this.storage.pager.number = 1
        this.getDoctorWorkData()
      },
      //获取数据
      getDoctorWorkData() {
        getDoctorWord(this.storage).then(res => {
          if (res.code === 200) {
            this.people_always = res.data.people_always
            this.amount_business = res.data.amount_business
            this.total = res.data.total
            this.tableData = res.data.data || []
          }
        })
      },
      //条数
      handleSizeChange(val) {
        this.storage.pager.size = val
        this.getDoctorWorkData()
      },
      //页码
      handleCurrentChange(val) {
        this.storage.pager.number = val
        this.getDoctorWorkData()
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/assets/scss/statistical/doctorWork.scss";
</style>
